<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转盘</title>
		<style>
			body {
				text-align: center;
			}

			button {
				cursor: pointer;
			}

			.box {
				width: 500px;
				height: 500px;
				margin: 10px auto;
				position: relative;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.main {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				border: 5px solid black;
				border-radius: 50%;
				background: rgba(128, 128, 128, 0.49);
				overflow: hidden;
				position: relative;
				transition: all 3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
			}

			.pointer {
				width: 50px;
				height: 50px;
				background: white;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				z-index: 9;
			}

			.pointer-bar {
				width: 60px;
				height: 25px;
				background: white;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(0, -50%);
			}

			.pointer-cursor {
				width: 25px;
				height: 25px;
				position: absolute;
				left: 85px;
				top: 50%;
				transform: translate(-50%, -50%) rotateZ(45deg);
				background: white;
			}

			.part {
				height: 100%;
				width: 50%;
				position: absolute;
				top: 0;
				left: 50%;
				transform-origin: left center;
				z-index: 1;
			}

			.bg {
				width: 100%;
				height: 100%;
			}

			.title {
				transform: translate(0, -50%);
				transform-origin: left top;
				width: 100%;
				height: auto;
				text-align: center;
				font-size: 30px;
				color: white;
				position: absolute;
				top: 50%;
				left: 0;
				padding-left: 85px;
				box-sizing: border-box;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.winner {
				font-size: 30px;
				color: red;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="main" ontransitionend="end()">
				<div id="temp" class="part" style="display: none;">
					<div class="bg"></div>
					<div class="title"></div>
				</div>
			</div>
			<div class="pointer">
				<div class="pointer-bar"></div>
				<div class="pointer-cursor"></div>
			</div>
		</div>
		<button onclick="start()">开始</button>
		<div class="winner"></div>
		<script>
			let rotate = 0;
			let random = function(num) {
				return Math.random() * num;
			}
			let randomColor = function() {
				return `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
			}
			let list = new Array(12).fill(0).map((v, i) => ({
				title: `item${i + 1}`,
				color: randomColor()
			}));
			// 每个的角度
			let perAngle = 360 / list.length;
			let main = document.querySelector(".main");
			let temp = document.querySelector("#temp");

			for (let i in list) {
				let item = list[i];
				let newNode = temp.cloneNode(true);
				newNode.style.display = 'block';
				newNode.style.transform = 'rotateZ(' + (perAngle * i + perAngle / 2) + 'deg)';
				newNode.querySelector('.bg').style.background = item.color;
				// 剪切路径
				if (list.length > 2) {
					let p = perAngle / 2; // 每份的角度两等分
					let d = Math.tan(p * Math.PI / 180) * 100; // 对边的长度
					let x = (100 - d) / 2; // 每份对边实际百分比
					newNode.style.clipPath = `polygon(0% 50%, 100% ${x}%, 100% ${100 - x}%)`;
				}
				newNode.querySelector('.title').innerHTML = item.title;

				main.appendChild(newNode);
			}

			let isRunning = false;

			function start() {
				if (isRunning) {
					console.warn('isRunning');
					return;
				}

				isRunning = true;

				document.querySelector('.winner').innerHTML = '';

				rotate += random(360) + 360 * 3; // 多转3圈

				main.style.transform = 'rotateZ(-' + rotate + 'deg)';
			}

			function end() {
				isRunning = false;
				let index = Math.floor(rotate / perAngle) % list.length;
				let winner = list[index];
				document.querySelector('.winner').innerHTML = '中奖：' + winner.title;
			}
		</script>
	</body>
</html>